<template>
	<view>
		<view style="width: 750rpx;height: 750rpx;display: flex;align-items: center;justify-content: center;color: #333;">
			<image v-if="currentDisplay=='石头'" class="image-shou" src="/static/shitouShou.png"></image>
			<image v-else-if="currentDisplay=='剪刀'" class="image-shou" src="/static/jiandaoShou.png"></image>
			<image v-else-if="currentDisplay=='布'" class="image-shou" src="/static/buShou.png"></image>
			<view v-else>点击下方按钮</view>
		</view>
		<button class="submit" @click="handleSubmit">开 始</button>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		watch
	} from 'vue';

	const choices = ['石头', '剪刀', '布'];
	// 状态管理
	const currentDisplay = ref('点击开始'); // 当前显示的文本
	const isFiltering = ref(false); // 是否正在筛选中
	const remainingTime = ref(2); // 剩余倒计时时间
	let interval = null; // 用于存储筛选动画的定时器ID
	
	const handleSubmit = ()=>{
		// 节流
		uni.$uv.throttle(() => {
			start()
		}, 2000)
	}
	// 开始筛选过程的方法
	const start = () => {
		// 更新状态为筛选中
		isFiltering.value = true;
		remainingTime.value = 2;

		// 启动快速切换显示的定时器（每100ms切换一次）
		interval = setInterval(() => {
			// 随机选择一个选项并显示
			const randomIndex = Math.floor(Math.random() * 3);
			currentDisplay.value = choices[randomIndex];
		}, 200);

		// 启动倒计时定时器（每1000ms减1）
		const countdown = setInterval(() => {
			// 剩余时间减1
			remainingTime.value--;

			// 当倒计时结束时
			if (remainingTime.value <= 0) {
				// 清除两个定时器
				clearInterval(countdown);
				clearInterval(interval);
				// 更新状态为筛选结束
				isFiltering.value = false;
				// 随机选择一个最终结果并显示
				const finalIndex = Math.floor(Math.random() * 3);
				currentDisplay.value = choices[finalIndex];
			}
		}, 1000);
	};
</script>

<style>
	@import "jianDao.css"
</style>